<template>
	<view>
		<swiper>
			<swiper-item v-for="item of bannerList" :key="item.bannerid">
				<image :src="item.img"></image>
			</swiper-item>
		</swiper>
		<ProList :proList = "proList" ></ProList>
		<view class="backBox" v-if="scrollTop > 300" @click="backtop">
		  <image src="../../static/resources/icon/back.png" class="backIcon"></image>
		</view>
	</view>
</template>

<script>
	import { getBannerList, getProList } from '../../api/home.js'
	import ProList from '../../components/ProList/ProList.vue'
	export default {
		components: {
			ProList
		},
		methods: {
			backtop () {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500
				})
			}
		},
		data() {
			return {
				bannerList: [],
				proList: [],
				count: 2,
				scrollTop: 0
			};
		},
		mounted () {
			getBannerList().then(res => {
				console.log('banner', res.data.data)
				this.bannerList = res.data.data
			})
			getProList().then(res=>{
				this.proList = res.data.data
			})
		},
		onReachBottom () {
			getProList({count: this.count}).then(res => {
				if (res.data.data.length === 0) {
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none'
					})
				} else {
					this.proList = [...this.proList, ...res.data.data]
					this.count++
				}
			})
		},
		onPullDownRefresh () {
			getProList().then(res => {
				this.proList = res.data.data
				this.count = 2
				uni.stopPullDownRefresh()
			})
		},
		onPageScroll ({scrollTop}) {
			this.scrollTop = scrollTop
		}
	}
</script>

<style lang="scss">
.backBox {
position: fixed;
width: 36px;
height: 36px;
right: 10px;
bottom: 10px;
/* #ifdef H5 */
  bottom: 60px;
  /* #endif */
}
.backIcon {
  position: fixed;
  width: 36px;
  height: 36px;
  right: 10px;
  bottom: 10px;
  /* #ifdef H5 */
  bottom: 60px;
  /* #endif */
}
</style>
